<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07个人简历</title>
</head>
<body>

<table border="1px">
    <caption>个人简介</caption>
    <tr>
        <td>照片:</td>
        <td id="picId"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="nameId"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="ageId"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friendsId"></td>
    </tr>
</table>

<script>
    let person = {
        name: '传奇',
        age: 18,
        fiends: ['喜羊羊', '美羊羊', '懒洋洋'],
        imgUrl: 'img/fcq.jpg'
    }
    //     根据id依次获取四个单元格元素
    let picTd = document.getElementById('picId');
    let nameTd = document.getElementById('nameId');
    let ageTd = document.getElementById('ageId');
    let friends = document.getElementById('friendsId');
    //将对象的指定属性放在单元格内
    nameTd.innerHTML=person.name
    ageTd.innerHTML=person.age
    //图片需要一个对象
    let imgE = document.createElement('img');
    imgE.src=person.imgUrl;
    imgE.width =100;
    // 图片放入img使用append
    picTd.append(imgE);

    let ulE =document.createElement('ul')

    for (let i=0 ;i<person.fiends.length;i++){
        let liE = document.createElement('li');
        liE.innerHTML = person.fiends[i];
        ulE.append(liE);
    }
    friends.append(ulE);











</script>

</body>
</html>